<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>小程序开发 | Will&#39;s blog</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/will/xin.ico">
    <link rel="stylesheet" href="../style/main.css">
    <meta name="description" content="斯人若彩虹，遇上方知有">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="preload" href="/will/assets/css/0.styles.b6de8ef8.css" as="style"><link rel="preload" href="/will/assets/js/app.e77fe8ad.js" as="script"><link rel="preload" href="/will/assets/js/3.19d8dd7e.js" as="script"><link rel="preload" href="/will/assets/js/1.cde8b311.js" as="script"><link rel="preload" href="/will/assets/js/9.c8e9dac1.js" as="script"><link rel="prefetch" href="/will/assets/js/10.3f6ba718.js"><link rel="prefetch" href="/will/assets/js/100.139e2315.js"><link rel="prefetch" href="/will/assets/js/101.48688945.js"><link rel="prefetch" href="/will/assets/js/102.065adb71.js"><link rel="prefetch" href="/will/assets/js/103.afb27929.js"><link rel="prefetch" href="/will/assets/js/104.d56b5577.js"><link rel="prefetch" href="/will/assets/js/105.8e6de207.js"><link rel="prefetch" href="/will/assets/js/106.cf8275a7.js"><link rel="prefetch" href="/will/assets/js/107.e1219958.js"><link rel="prefetch" href="/will/assets/js/108.89f471cb.js"><link rel="prefetch" href="/will/assets/js/109.860a4646.js"><link rel="prefetch" href="/will/assets/js/11.48a3ea24.js"><link rel="prefetch" href="/will/assets/js/110.4c49a0f9.js"><link rel="prefetch" href="/will/assets/js/111.b1ff0a30.js"><link rel="prefetch" href="/will/assets/js/112.6855af7b.js"><link rel="prefetch" href="/will/assets/js/113.73cc10ce.js"><link rel="prefetch" href="/will/assets/js/114.d9f95ccf.js"><link rel="prefetch" href="/will/assets/js/115.c204c90d.js"><link rel="prefetch" href="/will/assets/js/116.b6786151.js"><link rel="prefetch" href="/will/assets/js/117.c980193e.js"><link rel="prefetch" href="/will/assets/js/118.fd5f5951.js"><link rel="prefetch" href="/will/assets/js/119.2d749326.js"><link rel="prefetch" href="/will/assets/js/12.dd541a6f.js"><link rel="prefetch" href="/will/assets/js/120.c895e973.js"><link rel="prefetch" href="/will/assets/js/121.16eebc81.js"><link rel="prefetch" href="/will/assets/js/122.998e4582.js"><link rel="prefetch" href="/will/assets/js/123.487162ff.js"><link rel="prefetch" href="/will/assets/js/124.c6da26b1.js"><link rel="prefetch" href="/will/assets/js/125.4a263c66.js"><link rel="prefetch" href="/will/assets/js/126.0dc9a457.js"><link rel="prefetch" href="/will/assets/js/127.3f9cf0a9.js"><link rel="prefetch" href="/will/assets/js/128.f1b86c76.js"><link rel="prefetch" href="/will/assets/js/129.ba20315e.js"><link rel="prefetch" href="/will/assets/js/13.42b44cbf.js"><link rel="prefetch" href="/will/assets/js/130.0aa34e0b.js"><link rel="prefetch" href="/will/assets/js/131.fee81874.js"><link rel="prefetch" href="/will/assets/js/132.184d555a.js"><link rel="prefetch" href="/will/assets/js/133.15287e42.js"><link rel="prefetch" href="/will/assets/js/134.abe85c40.js"><link rel="prefetch" href="/will/assets/js/135.9ea3de85.js"><link rel="prefetch" href="/will/assets/js/136.b78a6ff1.js"><link rel="prefetch" href="/will/assets/js/137.a43d0025.js"><link rel="prefetch" href="/will/assets/js/138.19f94f16.js"><link rel="prefetch" href="/will/assets/js/139.64e33006.js"><link rel="prefetch" href="/will/assets/js/14.a6795e27.js"><link rel="prefetch" href="/will/assets/js/140.715ecf96.js"><link rel="prefetch" href="/will/assets/js/141.1ba53cc8.js"><link rel="prefetch" href="/will/assets/js/142.c524ce74.js"><link rel="prefetch" href="/will/assets/js/143.663d8f77.js"><link rel="prefetch" href="/will/assets/js/15.57ade25d.js"><link rel="prefetch" href="/will/assets/js/16.ea3d25d9.js"><link rel="prefetch" href="/will/assets/js/17.227b5567.js"><link rel="prefetch" href="/will/assets/js/18.798dabbc.js"><link rel="prefetch" href="/will/assets/js/19.92a956d1.js"><link rel="prefetch" href="/will/assets/js/20.58156a8f.js"><link rel="prefetch" href="/will/assets/js/21.be577f23.js"><link rel="prefetch" href="/will/assets/js/22.da032112.js"><link rel="prefetch" href="/will/assets/js/23.fe130883.js"><link rel="prefetch" href="/will/assets/js/24.73e19630.js"><link rel="prefetch" href="/will/assets/js/25.6e63b142.js"><link rel="prefetch" href="/will/assets/js/26.9ceb241f.js"><link rel="prefetch" href="/will/assets/js/27.a9b40edd.js"><link rel="prefetch" href="/will/assets/js/28.1898b904.js"><link rel="prefetch" href="/will/assets/js/29.f177f57a.js"><link rel="prefetch" href="/will/assets/js/30.119d11bc.js"><link rel="prefetch" href="/will/assets/js/31.2b5effe7.js"><link rel="prefetch" href="/will/assets/js/32.8f523225.js"><link rel="prefetch" href="/will/assets/js/33.bd743528.js"><link rel="prefetch" href="/will/assets/js/34.ebbfd9c7.js"><link rel="prefetch" href="/will/assets/js/35.fd8a4d41.js"><link rel="prefetch" href="/will/assets/js/36.7926ae95.js"><link rel="prefetch" href="/will/assets/js/37.d954ed43.js"><link rel="prefetch" href="/will/assets/js/38.ad4f1845.js"><link rel="prefetch" href="/will/assets/js/39.b08e799e.js"><link rel="prefetch" href="/will/assets/js/4.3889049d.js"><link rel="prefetch" href="/will/assets/js/40.f679097f.js"><link rel="prefetch" href="/will/assets/js/41.0399d427.js"><link rel="prefetch" href="/will/assets/js/42.8406af0a.js"><link rel="prefetch" href="/will/assets/js/43.81fbaed1.js"><link rel="prefetch" href="/will/assets/js/44.37da88a9.js"><link rel="prefetch" href="/will/assets/js/45.13ecbc23.js"><link rel="prefetch" href="/will/assets/js/46.c7219a20.js"><link rel="prefetch" href="/will/assets/js/47.582a1f3b.js"><link rel="prefetch" href="/will/assets/js/48.9582e48c.js"><link rel="prefetch" href="/will/assets/js/49.c4b6e61c.js"><link rel="prefetch" href="/will/assets/js/5.5225a481.js"><link rel="prefetch" href="/will/assets/js/50.1f4590f9.js"><link rel="prefetch" href="/will/assets/js/51.24b2997a.js"><link rel="prefetch" href="/will/assets/js/52.41560234.js"><link rel="prefetch" href="/will/assets/js/53.c187d861.js"><link rel="prefetch" href="/will/assets/js/54.f9228e97.js"><link rel="prefetch" href="/will/assets/js/55.a984b610.js"><link rel="prefetch" href="/will/assets/js/56.d4c315db.js"><link rel="prefetch" href="/will/assets/js/57.c53a2862.js"><link rel="prefetch" href="/will/assets/js/58.352c456f.js"><link rel="prefetch" href="/will/assets/js/59.8b4474e9.js"><link rel="prefetch" href="/will/assets/js/6.dabd5d34.js"><link rel="prefetch" href="/will/assets/js/60.7b0b22d1.js"><link rel="prefetch" href="/will/assets/js/61.c71acc1d.js"><link rel="prefetch" href="/will/assets/js/62.1e574112.js"><link rel="prefetch" href="/will/assets/js/63.e4a3ed80.js"><link rel="prefetch" href="/will/assets/js/64.8f0b32d3.js"><link rel="prefetch" href="/will/assets/js/65.b26a8612.js"><link rel="prefetch" href="/will/assets/js/66.6c1d63a4.js"><link rel="prefetch" href="/will/assets/js/67.b4373b3a.js"><link rel="prefetch" href="/will/assets/js/68.aa860531.js"><link rel="prefetch" href="/will/assets/js/69.48e4f511.js"><link rel="prefetch" href="/will/assets/js/7.659833f2.js"><link rel="prefetch" href="/will/assets/js/70.af7808fd.js"><link rel="prefetch" href="/will/assets/js/71.fa9ce741.js"><link rel="prefetch" href="/will/assets/js/72.e3cd206c.js"><link rel="prefetch" href="/will/assets/js/73.243cf46e.js"><link rel="prefetch" href="/will/assets/js/74.7cdb1f58.js"><link rel="prefetch" href="/will/assets/js/75.f22a8f44.js"><link rel="prefetch" href="/will/assets/js/76.05829c26.js"><link rel="prefetch" href="/will/assets/js/77.ce58ae8c.js"><link rel="prefetch" href="/will/assets/js/78.84c26697.js"><link rel="prefetch" href="/will/assets/js/79.e32dd7dd.js"><link rel="prefetch" href="/will/assets/js/8.f1a7e839.js"><link rel="prefetch" href="/will/assets/js/80.490f4009.js"><link rel="prefetch" href="/will/assets/js/81.96af5f79.js"><link rel="prefetch" href="/will/assets/js/82.719eb3e4.js"><link rel="prefetch" href="/will/assets/js/83.5ac308b4.js"><link rel="prefetch" href="/will/assets/js/84.e7a6be4a.js"><link rel="prefetch" href="/will/assets/js/85.943e06e1.js"><link rel="prefetch" href="/will/assets/js/86.9d30362b.js"><link rel="prefetch" href="/will/assets/js/87.74d9d285.js"><link rel="prefetch" href="/will/assets/js/88.c2fe652b.js"><link rel="prefetch" href="/will/assets/js/89.e879f671.js"><link rel="prefetch" href="/will/assets/js/90.5569b937.js"><link rel="prefetch" href="/will/assets/js/91.47320865.js"><link rel="prefetch" href="/will/assets/js/92.317dd9ba.js"><link rel="prefetch" href="/will/assets/js/93.26d10883.js"><link rel="prefetch" href="/will/assets/js/94.ba199252.js"><link rel="prefetch" href="/will/assets/js/95.4ce3b46e.js"><link rel="prefetch" href="/will/assets/js/96.d71e1886.js"><link rel="prefetch" href="/will/assets/js/97.a42a98b8.js"><link rel="prefetch" href="/will/assets/js/98.cf22a42b.js"><link rel="prefetch" href="/will/assets/js/99.f6738a3e.js">
    <link rel="stylesheet" href="/will/assets/css/0.styles.b6de8ef8.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container" data-v-2d5f533b><div data-v-2d5f533b><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-2d5f533b data-v-2d5f533b><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-64685f0e data-v-2d5f533b data-v-2d5f533b><h3 class="title" style="display:none;" data-v-64685f0e data-v-64685f0e>Will's blog</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-64685f0e data-v-64685f0e><input type="password" value="" data-v-64685f0e> <span data-v-64685f0e>Konck! Knock!</span> <button data-v-64685f0e>OK</button></label> <div class="footer" style="display:none;" data-v-64685f0e data-v-64685f0e><span data-v-64685f0e><i class="iconfont reco-theme" data-v-64685f0e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-64685f0e>vuePress-theme-reco</a></span> <span data-v-64685f0e><i class="iconfont reco-copyright" data-v-64685f0e></i> <a data-v-64685f0e><span data-v-64685f0e>Will</span>
            
          <span data-v-64685f0e>2020 - </span>
          2023
        </a></span></div></div> <div class="hide" data-v-2d5f533b><header class="navbar" data-v-2d5f533b><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/will/" class="home-link router-link-active"><img src="/will/xin.png" alt="Will's blog" class="logo"> <span class="site-name">Will's blog</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/will/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-coding"></i>
      前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/will/docs/note/" class="nav-link router-link-active"><i class="iconfont reco-suggestion"></i>
  学习笔记
</a></li><li class="dropdown-item"><!----> <a href="/will/docs/books/" class="nav-link"><i class="iconfont reco-npm"></i>
  阅读书籍
</a></li><li class="dropdown-item"><!----> <a href="/will/docs/article/" class="nav-link"><i class="iconfont reco-api"></i>
  质量文章
</a></li><li class="dropdown-item"><!----> <a href="/will/docs/dailyNotes/" class="nav-link"><i class="iconfont reco-suggestion"></i>
  日常笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/will/categories/Vue/" class="nav-link"><i class="iconfont undefined"></i>
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/规范编码/" class="nav-link"><i class="iconfont undefined"></i>
  规范编码
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/项目总结/" class="nav-link"><i class="iconfont undefined"></i>
  项目总结
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/Vue组件/" class="nav-link"><i class="iconfont undefined"></i>
  Vue组件
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/javaScript/" class="nav-link"><i class="iconfont undefined"></i>
  javaScript
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/工具js库/" class="nav-link"><i class="iconfont undefined"></i>
  工具js库
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/vue/" class="nav-link"><i class="iconfont undefined"></i>
  vue
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/组件/" class="nav-link"><i class="iconfont undefined"></i>
  组件
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/TypeScript/" class="nav-link"><i class="iconfont undefined"></i>
  TypeScript
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/基础知识/" class="nav-link"><i class="iconfont undefined"></i>
  基础知识
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/总结/" class="nav-link"><i class="iconfont undefined"></i>
  总结
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/日常笔记/" class="nav-link"><i class="iconfont undefined"></i>
  日常笔记
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/学习计划/" class="nav-link"><i class="iconfont undefined"></i>
  学习计划
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/css/" class="nav-link"><i class="iconfont undefined"></i>
  css
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/element/" class="nav-link"><i class="iconfont undefined"></i>
  element
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/其他/" class="nav-link"><i class="iconfont undefined"></i>
  其他
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/Vue3/" class="nav-link"><i class="iconfont undefined"></i>
  Vue3
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/数据可视化/" class="nav-link"><i class="iconfont undefined"></i>
  数据可视化
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/算法/" class="nav-link"><i class="iconfont undefined"></i>
  算法
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/面试/" class="nav-link"><i class="iconfont undefined"></i>
  面试
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/Vite/" class="nav-link"><i class="iconfont undefined"></i>
  Vite
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/uni-app/" class="nav-link"><i class="iconfont undefined"></i>
  uni-app
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/ui框架/" class="nav-link"><i class="iconfont undefined"></i>
  ui框架
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/小程序/" class="nav-link"><i class="iconfont undefined"></i>
  小程序
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/HTML/" class="nav-link"><i class="iconfont undefined"></i>
  HTML
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/CSS/" class="nav-link"><i class="iconfont undefined"></i>
  CSS
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/React.js/" class="nav-link"><i class="iconfont undefined"></i>
  React.js
</a></li></ul></div></div><div class="nav-item"><a href="/will/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      部分项目
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/zhenzhencai/FontEndInterview" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  面试指南
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/will/docs/protests/VueUI.html" class="nav-link"><i class="iconfont reco-github"></i>
  Vue轮子
</a></li></ul></div></div><div class="nav-item"><a href="/will/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><a href="/will/docs/disorder/m1.html" class="nav-link"><i class="iconfont reco-coding"></i>
  题目汇总
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      关于我
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/willwong" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  Gitee
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://github.com/wangliangxin" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1418580404&amp;site=qq&amp;menu=yes" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-qq"></i>
  QQ
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-2d5f533b></div> <aside class="sidebar" data-v-2d5f533b><div class="personal-info-wrapper" data-v-ca798c94 data-v-2d5f533b><img src="/will/xin.png" alt="author-avatar" class="personal-img" data-v-ca798c94> <h3 class="name" data-v-ca798c94>
    Will
  </h3> <div class="num" data-v-ca798c94><div data-v-ca798c94><h3 data-v-ca798c94>85</h3> <h6 data-v-ca798c94>Article</h6></div> <div data-v-ca798c94><h3 data-v-ca798c94>6</h3> <h6 data-v-ca798c94>Tag</h6></div></div> <hr data-v-ca798c94></div> <nav class="nav-links"><div class="nav-item"><a href="/will/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-coding"></i>
      前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/will/docs/note/" class="nav-link router-link-active"><i class="iconfont reco-suggestion"></i>
  学习笔记
</a></li><li class="dropdown-item"><!----> <a href="/will/docs/books/" class="nav-link"><i class="iconfont reco-npm"></i>
  阅读书籍
</a></li><li class="dropdown-item"><!----> <a href="/will/docs/article/" class="nav-link"><i class="iconfont reco-api"></i>
  质量文章
</a></li><li class="dropdown-item"><!----> <a href="/will/docs/dailyNotes/" class="nav-link"><i class="iconfont reco-suggestion"></i>
  日常笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/will/categories/Vue/" class="nav-link"><i class="iconfont undefined"></i>
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/规范编码/" class="nav-link"><i class="iconfont undefined"></i>
  规范编码
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/项目总结/" class="nav-link"><i class="iconfont undefined"></i>
  项目总结
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/Vue组件/" class="nav-link"><i class="iconfont undefined"></i>
  Vue组件
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/javaScript/" class="nav-link"><i class="iconfont undefined"></i>
  javaScript
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/工具js库/" class="nav-link"><i class="iconfont undefined"></i>
  工具js库
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/vue/" class="nav-link"><i class="iconfont undefined"></i>
  vue
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/组件/" class="nav-link"><i class="iconfont undefined"></i>
  组件
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/TypeScript/" class="nav-link"><i class="iconfont undefined"></i>
  TypeScript
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/基础知识/" class="nav-link"><i class="iconfont undefined"></i>
  基础知识
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/总结/" class="nav-link"><i class="iconfont undefined"></i>
  总结
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/日常笔记/" class="nav-link"><i class="iconfont undefined"></i>
  日常笔记
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/学习计划/" class="nav-link"><i class="iconfont undefined"></i>
  学习计划
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/css/" class="nav-link"><i class="iconfont undefined"></i>
  css
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/element/" class="nav-link"><i class="iconfont undefined"></i>
  element
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/其他/" class="nav-link"><i class="iconfont undefined"></i>
  其他
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/Vue3/" class="nav-link"><i class="iconfont undefined"></i>
  Vue3
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/数据可视化/" class="nav-link"><i class="iconfont undefined"></i>
  数据可视化
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/算法/" class="nav-link"><i class="iconfont undefined"></i>
  算法
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/面试/" class="nav-link"><i class="iconfont undefined"></i>
  面试
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/Vite/" class="nav-link"><i class="iconfont undefined"></i>
  Vite
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/uni-app/" class="nav-link"><i class="iconfont undefined"></i>
  uni-app
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/ui框架/" class="nav-link"><i class="iconfont undefined"></i>
  ui框架
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/小程序/" class="nav-link"><i class="iconfont undefined"></i>
  小程序
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/HTML/" class="nav-link"><i class="iconfont undefined"></i>
  HTML
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/CSS/" class="nav-link"><i class="iconfont undefined"></i>
  CSS
</a></li><li class="dropdown-item"><!----> <a href="/will/categories/React.js/" class="nav-link"><i class="iconfont undefined"></i>
  React.js
</a></li></ul></div></div><div class="nav-item"><a href="/will/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      部分项目
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/zhenzhencai/FontEndInterview" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  面试指南
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="/will/docs/protests/VueUI.html" class="nav-link"><i class="iconfont reco-github"></i>
  Vue轮子
</a></li></ul></div></div><div class="nav-item"><a href="/will/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div><div class="nav-item"><a href="/will/docs/disorder/m1.html" class="nav-link"><i class="iconfont reco-coding"></i>
  题目汇总
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      关于我
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/willwong" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  Gitee
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="https://github.com/wangliangxin" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li class="dropdown-item"><!----> <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1418580404&amp;site=qq&amp;menu=yes" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-qq"></i>
  QQ
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>前言</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>基础</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/will/docs/note/m1.html" aria-current="page" class="active sidebar-link">1. 小程序</a></li><li><a href="/will/docs/note/m3.html" class="sidebar-link">2. git操作</a></li><li><a href="/will/docs/note/m4.html" class="sidebar-link">3. element-ui</a></li><li><a href="/will/docs/note/m5.html" class="sidebar-link">4. HTML</a></li><li><a href="/will/docs/note/m6.html" class="sidebar-link">5. CSS </a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>进阶</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>高阶</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>其他</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-64685f0e data-v-2d5f533b><h3 class="title" style="display:none;" data-v-64685f0e data-v-64685f0e>小程序开发</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-64685f0e data-v-64685f0e><input type="password" value="" data-v-64685f0e> <span data-v-64685f0e>Konck! Knock!</span> <button data-v-64685f0e>OK</button></label> <div class="footer" style="display:none;" data-v-64685f0e data-v-64685f0e><span data-v-64685f0e><i class="iconfont reco-theme" data-v-64685f0e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-64685f0e>vuePress-theme-reco</a></span> <span data-v-64685f0e><i class="iconfont reco-copyright" data-v-64685f0e></i> <a data-v-64685f0e><span data-v-64685f0e>Will</span>
            
          <span data-v-64685f0e>2020 - </span>
          2023
        </a></span></div></div> <div data-v-2d5f533b><main class="page"><div class="page-title" style="display:none;"><h1 class="title">小程序开发</h1> <div data-v-3b7f5bdf><i class="iconfont reco-account" data-v-3b7f5bdf><span data-v-3b7f5bdf>Will</span></i> <i class="iconfont reco-date" data-v-3b7f5bdf><span data-v-3b7f5bdf>2020-12-27</span></i> <!----> <!----></div></div> <div class="theme-reco-content content__default" style="display:none;"><div id="boxx" data-v-f4ca0dac><div data-v-f4ca0dac><p v-if="true" class="custom-block-title" data-v-f4ca0dac></p> <p v-if="true" data-v-f4ca0dac></p></div></div> <p>在学校的时候就说想学一学小程序来着，但是忙于其他的事情，加上自己也没有足够的重视，就拖拉到现在了。<br>
一句话： <em><strong>当你想做什么时，你就去做，不要拖沓。</strong></em></p> <h2 id="写在前面"><a href="#写在前面" class="header-anchor">#</a> 写在前面</h2> <p>以前在学校学习过 <strong>安卓开发</strong>，觉得特别好玩，也有兴趣，奈何当项目稍微大一些时，开发体验感极差，卡的不行。<br>
今天随便玩了玩微信小程序，感觉使用体验很好，开发体验也不错，开发工具、框架、文档都很俱全。</p> <h2 id="hello-world"><a href="#hello-world" class="header-anchor">#</a> hello world</h2> <p>安装微信开发者工具可以在官网下载安装，然后新建项目即可。</p> <ul><li>app.json</li></ul> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html" target="_blank" rel="noopener noreferrer">app.json<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 为全局配置文件，可以配置页面的标题及其颜色、背景颜色、taBbar等等<br>
1，pages 页面路径列表, 在微信开发者工具中，填写，将自动创建文件（wxml，wxss，js，json）<br>
2，window  窗口页面的一些配置，如顶部标题及其颜色背景<br>
3，tabBar   导航栏，可设置item</p> <p>例：   其中的icon 来着<a href="https://www.iconfont.cn" target="_blank" rel="noopener noreferrer">阿里巴巴矢量图标库<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p><img src="/will/assets/img/25.2b6be635.png" alt="xx"></p> <h2 id="基础知识"><a href="#基础知识" class="header-anchor">#</a> 基础知识</h2> <blockquote><p>text  相当于 web 中的 span， 不换行， 行内</p></blockquote> <blockquote><p>view  相当于 web 中的 div， 换行， 块级</p></blockquote> <h3 id="数据的双向绑定"><a href="#数据的双向绑定" class="header-anchor">#</a> 数据的双向绑定</h3> <p>1, 设置值：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>this.setData({
        num: e.detail.value
})
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>2, 函数参数需借助自定义属性</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;view&gt;
  &lt;button bindtap=&quot;handleTap&quot; data-opration=&quot;{{1}}&quot;&gt;+&lt;/button&gt;
  &lt;button bindtap=&quot;handleTap&quot; data-opration=&quot;{{-1}}&quot;&gt;-&lt;/button&gt;
&lt;/view&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><img src="" alt="xx"></p> <h3 id="css"><a href="#css" class="header-anchor">#</a> css</h3> <p>1, rpx<br>
规定屏幕的尺寸统一为 <code>750rpx</code>,<br>
当设计稿上的 <code>div</code>要求 <code>500px</code>， 则应该这样计算：500 * 750 / 实际屏幕尺寸<br>
原理：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>750 rpx == 实际屏幕尺寸 px    
    rpx ==  500 px  
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>2, 导入<br>
使用@import(&quot;url&quot;) 导入</p> <p>3, 选择器<br>
不支持 * 通配符，下面代码将无效</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>*{
    padding: 0,
    margin: 0
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="组件"><a href="#组件" class="header-anchor">#</a> <a href="https://developers.weixin.qq.com/miniprogram/dev/component/text.html" target="_blank" rel="noopener noreferrer">组件<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h3> <p>这里只列举部分常用的组件，具体请看文档。</p> <ul><li>text<br>
1，只有text组件能让文字变得可选，方法是添加 <code>user-select</code> 属性<br>
2，解码 decode</li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;text user-select = &quot;true&quot;  decode=&quot;true&quot;&gt;
    这里用来测试text 标签的 user-select 属性
    &amp;nbsp;
    &amp;lt;
&lt;/text&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li><p>image<br>
1, 小程序的打包大小有限制， 所以图片等资源需要放到外部，可以借助图床。<br>
2，图片默认大小为 320px *  240 px<br>
3，image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别
4，懒加载 lazy-load
5，缩放 mode</p></li> <li><p>swiper
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。<br>
1，存在默认值， 默认高度为150px， 而且无法因为swiper-item内容撑开，但可以由css修改</p></li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>- swiper 的宽度 为  100%

- swiper 宽度 / swiper 高度 =  图片的宽度 / 图片的高度 

- 根据上面的计算公司将 swiper 的高度计算出来，然后再将image 的 宽高比不变， 高度/ 宽度 自动填充  
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li><p>navigator<br>
导航组件，块级函数，默认会换行， 可以直接加宽度和高度。</p></li> <li><p>rich-text<br>
可以解析代码，实际上这样写不安全</p></li> <li><p>button<br>
按钮，用法和web中类似<br>
1， type<br>
2， form-type<br>
3， <strong>open-type</strong><br> <img src="/will/assets/img/27.78bc8d03.png" alt="xx"></p></li></ul> <hr> <hr> <p><em><strong>大概学习了一边小程序的基础语法，与web基本相似，有略微差别，具体可以看官方文档</strong></em></p> <h2 id="云开发"><a href="#云开发" class="header-anchor">#</a> 云开发</h2> <h3 id="数据库"><a href="#数据库" class="header-anchor">#</a> 🍓 数据库</h3> <p><img src="/will/assets/img/29.6cfb67ba.png" alt="29"></p> <p>🐟  获取 demoList中的数据：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'demoList'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>
      <span class="token punctuation">{</span>
        <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">)</span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>🐟 条件获取<br>
获取 id为 <code>1526e12a6008d3110039bcfc04553f22</code>的记录</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-js"><code>db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'demoList'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">doc</span><span class="token punctuation">(</span><span class="token string">&quot;1526e12a6008d3110039bcfc04553f22&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>
      <span class="token punctuation">{</span>
        <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">)</span> 
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>避免回调地域，也可以使用 promise 的风格调用</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-js"><code>db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">&quot;demoList&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
            <span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                    personList<span class="token operator">:</span> res<span class="token punctuation">.</span>data
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">)</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>🐟 前台使用数据库数据的简单demo</p> <ul><li>连接数据库</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> db <span class="token operator">=</span> wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">database</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>连接数据表</li></ul> <div class="language-js line-numbers-mode"><div class="highlight-lines"><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-js"><code>db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">&quot;demoList&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
   <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>

   <span class="token punctuation">}</span> 
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>赋值给前台变量</li></ul> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-js"><code>db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">&quot;demoList&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
   <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>
           <span class="token punctuation">{</span>
               personList<span class="token operator">:</span> res<span class="token punctuation">.</span>data
           <span class="token punctuation">}</span>
       <span class="token punctuation">)</span>
   <span class="token punctuation">}</span> 
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li>前台显示</li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;view wx:for = &quot;{{personList}}&quot;&gt;{{item.name}} &lt;/view&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="where-查询指令"><a href="#where-查询指令" class="header-anchor">#</a> 🐟 where 查询指令</h4> <ul><li>简单实例：</li></ul> <div class="language-js line-numbers-mode"><div class="highlight-lines"><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-js"><code>  db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">&quot;demoList&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">&quot;will&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
      <span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
              personList<span class="token operator">:</span> res<span class="token punctuation">.</span>data
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
  <span class="token punctuation">)</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h4 id="add-添加记录"><a href="#add-添加记录" class="header-anchor">#</a> 🐟 add 添加记录</h4> <ul><li>添加一条记录</li></ul> <div class="language-js line-numbers-mode"><div class="highlight-lines"><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-js"><code>db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">&quot;demoList&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    data<span class="token operator">:</span> <span class="token punctuation">{</span>
        name<span class="token operator">:</span> <span class="token string">'小鹿'</span><span class="token punctuation">,</span>
        age<span class="token operator">:</span> <span class="token string">'12'</span><span class="token punctuation">,</span>
        school<span class="token operator">:</span> <span class="token string">'北大'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
    <span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li>表单添加</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">bindsubmit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnSub<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">'</span>name<span class="token punctuation">'</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>姓名<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">'</span>age<span class="token punctuation">'</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>年龄<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">'</span>school<span class="token punctuation">'</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>学校<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">'</span>work<span class="token punctuation">'</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>公司<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">form-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">form-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reset<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>重置<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">btnSub</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> <span class="token punctuation">{</span>
        name<span class="token punctuation">,</span>
        age<span class="token punctuation">,</span>
        school<span class="token punctuation">,</span>
        work
    <span class="token punctuation">}</span> <span class="token operator">=</span> res<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>value
    db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">&quot;demoList&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        data<span class="token operator">:</span> <span class="token punctuation">{</span>
            name<span class="token punctuation">,</span>
            age<span class="token punctuation">,</span>
            school<span class="token punctuation">,</span>
            work
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
        <span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h4 id="更改"><a href="#更改" class="header-anchor">#</a> 🐟 更改</h4> <ul><li>update  局部更新一个或多个记录<br>
注意： 要添加筛选条件, 字段有则替换，无则添加</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">updateData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'demoList'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        name<span class="token operator">:</span> <span class="token string">'王玉'</span><span class="token punctuation">,</span>
        money<span class="token operator">:</span> <span class="token string">'10000'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        data<span class="token operator">:</span> <span class="token punctuation">{</span>
            name<span class="token operator">:</span> <span class="token string">'罗柳'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li>set   替换更新一个记录<br>
注意： 下面代码将记录 的name值修改，其他字段将全部删除， （慎用！）</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">updateData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'demoList'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        name<span class="token operator">:</span> <span class="token string">'王玉'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        data<span class="token operator">:</span> <span class="token punctuation">{</span>
            name<span class="token operator">:</span> <span class="token string">'罗柳'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h4 id="remove-删除数据"><a href="#remove-删除数据" class="header-anchor">#</a> 🐟 remove 删除数据</h4> <ul><li>删除一条记录
注意： 在大多数情况下，我们希望用户只能操作自己的数据（自己的代表事项），不能操作其他人的数据（其他人的待办事项），这就需要引入权限控制了。
自己只能删除自己往数据库中添加的数据，小程序并不希望你删除其他人的数据。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">removeData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">&quot;demoList&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        name<span class="token operator">:</span> <span class="token string">'小鹿'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="count-记录条数"><a href="#count-记录条数" class="header-anchor">#</a> 🐟 count 记录条数</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code>db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">&quot;demoList&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
    <span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="command-数据库操作符"><a href="#command-数据库操作符" class="header-anchor">#</a> 🐟 command 数据库操作符</h4> <p><code>const _ = db.command</code> <code>_</code>对象有很多方法：<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Command.html" target="_blank" rel="noopener noreferrer">api<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <ul><li>筛选出年龄大于15的<br>
gt 大于； lt 小于； eq  等于；  neq  不等于； gte  大于或等于； ……  更多见文档 <a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Command.html" target="_blank" rel="noopener noreferrer">api<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">selectByAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'demoList'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        age<span class="token operator">:</span> _<span class="token punctuation">.</span><span class="token function">gt</span><span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
        <span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                personList<span class="token operator">:</span> res<span class="token punctuation">.</span>data
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>in 和 nin</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'demoList'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    age<span class="token operator">:</span> _<span class="token punctuation">.</span><span class="token function">in</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
    <span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            personList<span class="token operator">:</span> res<span class="token punctuation">.</span>data
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>and   取 10岁到 20岁的人</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br></div><pre class="language-js"><code>db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">'demoList'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    age<span class="token operator">:</span> _<span class="token punctuation">.</span><span class="token function">and</span><span class="token punctuation">(</span>_<span class="token punctuation">.</span><span class="token function">gt</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span> _<span class="token punctuation">.</span><span class="token function">lt</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
    <span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            personList<span class="token operator">:</span> res<span class="token punctuation">.</span>data
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="云函数"><a href="#云函数" class="header-anchor">#</a> 🍓 云函数</h3> <p>云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写、一键上传部署即可运行后端代码。 函数名类似于云接口，前端通过云函数名
即可启动云函数，并且可以给云函数传参数，云函数接受参数，并直接操作数据库。</p> <ul><li>简单示例：<br> <strong>注意：</strong> 更改后的云函数一定要重新上传并部署</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function-variable function">onLoad</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">callFunction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        name<span class="token operator">:</span> <span class="token string">'getData'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul><li>给云函数传递参数</li></ul> <p>传递参数</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-js"><code>wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">callFunction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;getDemoList&quot;</span><span class="token punctuation">,</span>
    data<span class="token operator">:</span><span class="token punctuation">{</span>
        num<span class="token operator">:</span> <span class="token number">3</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>接受参数</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><div class="highlighted"> </div><br><br></div><pre class="language-js"><code><span class="token comment">// 云函数入口函数</span>
exports<span class="token punctuation">.</span><span class="token function-variable function">main</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> context</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
   <span class="token keyword">var</span>  num  <span class="token operator">=</span> event<span class="token punctuation">.</span>num
   <span class="token keyword">return</span> <span class="token keyword">await</span> db<span class="token punctuation">.</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token string">&quot;demoList&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">limit</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span>  
<span class="token punctuation">}</span>  
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="云存储"><a href="#云存储" class="header-anchor">#</a> 🍓 云存储</h3> <blockquote><p>云开发提供了一块存储空间，提供了上传文件到云端、带权限管理的云端下载能力，开发者可以在小程序端和云函数端通过 API 使用云存储功能。</p></blockquote> <blockquote><p>在小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作。下面简单的几行代码，即可实现在小程序内让用户选择一张图片，然后上传到云端管理的功能</p></blockquote> <ul><li>上传图片到云存储案例：</li></ul> <div class="language-js {3, 15} line-numbers-mode"><pre class="language-js"><code>  <span class="token comment">// 选择图片，并生成临时地址</span>
  <span class="token function">loadImage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">chooseImage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      count<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
      
      <span class="token keyword">var</span> pathFile <span class="token operator">=</span>  res<span class="token punctuation">.</span>tempFilePaths<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">cloudFile</span><span class="token punctuation">(</span>pathFile<span class="token punctuation">)</span>
     
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// 利用临时地址将图片传到云存储空间</span>
  <span class="token function">cloudFile</span><span class="token punctuation">(</span><span class="token parameter">path</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        cloudPath<span class="token operator">:</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'.jpg'</span><span class="token punctuation">,</span>
        filePath<span class="token operator">:</span> path
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h2 id="小程序ui-组件库"><a href="#小程序ui-组件库" class="header-anchor">#</a> 小程序ui 组件库</h2> <p><a href="https://zhuanlan.zhihu.com/p/204245080?utm_source=qq" target="_blank" rel="noopener noreferrer">友情链接<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>
9款小程序ui框架比较：<br>
这些UI组件库各有所长，适合不同的小程序类型，Vant 适合电商类的，TaroUI 与 Wux 适合工具类的，而蘑菇街的 MinUI 当然更适合社区类的了。</p> <ul><li>TouchUI WX</li> <li><a href="https://doc.mini.talelin.com/component/view/loading.html" target="_blank" rel="noopener noreferrer">lin-ui<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/Tencent/weui-wxss" target="_blank" rel="noopener noreferrer">we-ui<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/TalkingData/iview-weapp" target="_blank" rel="noopener noreferrer">iview weapp<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/weilanwl/ColorUI" target="_blank" rel="noopener noreferrer">ColorUI<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/youzan/vant-weapp" target="_blank" rel="noopener noreferrer">Vant Weapp<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/NervJS/taro-ui" target="_blank" rel="noopener noreferrer">TaroUI<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://wux-weapp.github.io/wux-weapp-docs/#/introduce" target="_blank" rel="noopener noreferrer">WuxUI<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://meili.github.io/min/" target="_blank" rel="noopener noreferrer">MinUI<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="vant-weapp-小程序-ui-组件库初体验"><a href="#vant-weapp-小程序-ui-组件库初体验" class="header-anchor">#</a> 🍓 Vant Weapp 小程序 UI 组件库初体验</h3> <p>UI 组件库的使用较为简单，具体可以看文档</p> <ul><li><p>npm 初始化<br>
在 miniprogram 目录下并没有 package.json 文件， 所以我们在 miniprogram 目录下打开终端， 使用 <code>npm init</code> 初始化包管理</p></li> <li><p>安装 @vant/weapp<br>
在 miniprogram 目录终端 <code>npm i @vant/weapp -S --production</code></p></li> <li><p>使用npm模块<br>
在 微信开发者工具中点击 详情-&gt;本地设置-&gt;使用npm模块</p></li> <li><p>构建npm<br>
在工具-&gt;构建npm</p></li> <li><p>修改app.json
将app.json中的&quot;style&quot;: &quot;v2&quot;移除，小程序的新版本基础组件强行加上了很多样式，难以覆盖，不关闭将造成部分组件样式混乱。</p></li> <li><p>修改project.config.json<br>
开发者工具创建的项目，miniprogramRoot替代为miniprogram，package.json在其外部，npm建立无法正常工作。<br>
手动需要在project.config.json内添加如下配置，使开发者工具可以正确索引到故宫依赖的位置。</p></li></ul> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  ...
  <span class="token property">&quot;setting&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    ...
    <span class="token property">&quot;packNpmManually&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token property">&quot;packNpmRelationList&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token property">&quot;packageJsonPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./package.json&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;miniprogramNpmDistDir&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./miniprogram/&quot;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>注意：由于现有的新版本开发者工具创建的小程序目录文件结构问题，npm建立的文件目录为miniprogram_npm，并且开发工具会在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'。/ '即可</p> <ul><li>引入组件<br>
以Button组件为例，只需要在app.json或index.json中配置Button对应的路径即可。
所有组件文档中的引入路径均以npm安装为例，如果您是通过下载源代码的方式使用@ vant / weapp，则将路径修改为项目中@ vant / weapp所在的目录。</li></ul> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token comment">// 通过 npm 安装</span>
<span class="token comment">// app.json</span>
<span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token property">&quot;van-button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@vant/weapp/button/index&quot;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 通过下载源码使用 es6版本</span>
<span class="token comment">// app.json</span>
<span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token property">&quot;van-button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;path/to/@vant/weapp/dist/button/index&quot;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 通过下载源码使用 es5版本</span>
<span class="token comment">// app.json</span>
<span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token property">&quot;van-button&quot;</span><span class="token operator">:</span> <span class="token string">&quot;path/to/@vant/weapp/lib/button/index&quot;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><ul><li>显示组件<br>
引入组件后，可以在wxml中直接使用组件</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="设计指南"><a href="#设计指南" class="header-anchor">#</a> 设计指南</h2> <blockquote><p>基于微信小程序轻快的特点，我们拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。</p></blockquote> <p><a href="https://developers.weixin.qq.com/miniprogram/design/" target="_blank" rel="noopener noreferrer">推荐阅读<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h2 id="api工厂"><a href="#api工厂" class="header-anchor">#</a> api工厂</h2> <p>在看一个名为 天使童装的开源项目时，发现一个 <a href="https://www.it120.cc/" target="_blank" rel="noopener noreferrer">api-wxapi<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>的 api工厂，有点点类似云开发，就是别人给你做好了一个后台，你直接可以调用api访问数据，并且数据可
由你自己上传。但是免费版访问受限，这里只推荐作为 前端人员学习使用，不建议做项目时使用，除非你使用专业版，但其实也不安全，还不如自己构建后台。</p> <ul><li><p>注册<br> <a href="https://www.it120.cc/" target="_blank" rel="noopener noreferrer">官网<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，点击又上角即可以注册使用，注册完成后登录后台管理系统，即可使用。</p></li> <li><p>数据克隆<br>
免费注册开通新后台后登录，登录后的首页，请记下你的专属域名(可自己修改)，左侧菜单 “工厂设置” --&gt; “数据克隆” --&gt; “将别人的数据克隆给我”，对方商户ID填写 <code>951</code>（天使童装的数据），点击 “立即克隆”，克隆成功后，F5 刷新一下后台</p></li> <li><p>使用</p></li></ul> <p><code>npm install apifm-wxapi</code>  npm安装模块， 引入模块， 初始化模块（用专属域名初始化）</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token constant">WXAPI</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'apifm-wxapi'</span><span class="token punctuation">)</span>
<span class="token constant">WXAPI</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'will'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>调用接口， 更多接口见<a href="https://github.com/gooking/apifm-wxapi/blob/master/instructions.md" target="_blank" rel="noopener noreferrer">接口文档<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token constant">WXAPI</span><span class="token punctuation">.</span><span class="token function">banners</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>

      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'请在控制台看打印出来的数据：'</span><span class="token punctuation">,</span> res<span class="token punctuation">)</span>  

  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="启动页"><a href="#启动页" class="header-anchor">#</a> 启动页</h2> <p>下面将使用 apifm-wxapi、原生组件、创建一个项目的启动页。启动页是一个app，第一次进入时加载的图片或者动画，可以缓解第一次长时间加载带给用户的焦虑。
还可以对app功能做一些介绍。</p> <p><strong>多看注释的备注</strong></p> <ul><li>新建启动页<br>
在 <code>app.json</code> 中 的 pages 中添加 <code>&quot;pages/start/start&quot;,</code> 保存后将自动创建start页面。</li></ul> <p>start.wxml</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>swiper</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>swiper_box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindchange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>swiperchange<span class="token punctuation">&quot;</span></span> <span class="token attr-name">indicator-dots</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">indicator-active-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#fff<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>swiper-item</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{banners}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>id<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>aspectFill<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>imgClick<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{item.picUrl}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>swiper-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>swiper</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> 
  <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{swiperCurrent + 1 == swiperMaxNumber}}<span class="token punctuation">&quot;</span></span> 
  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> 
  <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mini<span class="token punctuation">&quot;</span></span> 
  <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>goToIndex<span class="token punctuation">&quot;</span></span> 
  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>weui-btn mini-btn<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">&gt;</span></span>
  进入店铺
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><details class="custom-block details"><summary>start.js 点击查看代码</summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token constant">WXAPI</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'apifm-wxapi'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token constant">CONFIG</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../../config.js'</span><span class="token punctuation">)</span>


<span class="token comment">//获取应用实例</span>
<span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    data<span class="token operator">:</span> <span class="token punctuation">{</span>
        banners<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        swiperMaxNumber<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
        swiperCurrent<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">onLoad</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> _this <span class="token operator">=</span> <span class="token keyword">this</span>
        wx<span class="token punctuation">.</span><span class="token function">setNavigationBarTitle</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            title<span class="token operator">:</span> wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span><span class="token string">'mallName'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token keyword">let</span> shopMod <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span><span class="token string">'shopMod'</span><span class="token punctuation">)</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>shopMod<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            shopMod <span class="token operator">=</span> <span class="token number">0</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">const</span> app_show_pic_version <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span><span class="token string">'app_show_pic_version'</span><span class="token punctuation">)</span>

        <span class="token comment">// 有缓存，并且没有版本更新</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>app_show_pic_version <span class="token operator">&amp;&amp;</span> app_show_pic_version <span class="token operator">==</span> <span class="token constant">CONFIG</span><span class="token punctuation">.</span>version<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>shopMod <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                    url<span class="token operator">:</span> <span class="token string">'/pages/shop/select'</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>

                <span class="token comment">// redirectTo：关闭当前页，跳转到指定页； </span>
                <span class="token comment">// navigateTo： 保留当前页， 跳转到指定页；</span>
                <span class="token comment">// switchTab： 只能用于跳转到tabbar页面， 并关闭其他非tabbar页面。</span>

                wx<span class="token punctuation">.</span><span class="token function">switchTab</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                    url<span class="token operator">:</span> <span class="token string">'/pages/index/index'</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token comment">// 展示启动页</span>
            <span class="token constant">WXAPI</span><span class="token punctuation">.</span><span class="token function">banners</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                type<span class="token operator">:</span> <span class="token string">'app'</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span> <span class="token number">700</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">if</span> <span class="token punctuation">(</span>shopMod <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                        wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                            url<span class="token operator">:</span> <span class="token string">'/pages/shop/select'</span><span class="token punctuation">,</span>
                        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                        wx<span class="token punctuation">.</span><span class="token function">switchTab</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                            url<span class="token operator">:</span> <span class="token string">'/pages/index/index'</span><span class="token punctuation">,</span>
                        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                    _this<span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                        banners<span class="token operator">:</span> res<span class="token punctuation">.</span>data<span class="token punctuation">,</span>
                        swiperMaxNumber<span class="token operator">:</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>length
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>shopMod <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                        url<span class="token operator">:</span> <span class="token string">'/pages/shop/select'</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                    wx<span class="token punctuation">.</span><span class="token function">switchTab</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                        url<span class="token operator">:</span> <span class="token string">'/pages/index/index'</span><span class="token punctuation">,</span>
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">onShow</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">swiperchange</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log(e.detail.current)</span>
        <span class="token comment">//  swiperchange  轮播改变 ， e.detail.current 显示当前index （从0 开始）</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            swiperCurrent<span class="token operator">:</span> e<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>current
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">goToIndex</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> shopMod <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span><span class="token string">'shopMod'</span><span class="token punctuation">)</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>shopMod<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            shopMod <span class="token operator">=</span> <span class="token number">0</span>
        <span class="token punctuation">}</span>

        <span class="token comment">// app.globalData.isConnected 全局变量的使用</span>
        <span class="token comment">// 在 app.json 中 配置， </span>
        <span class="token comment">// 在使用页面//获取应用实例</span>
        <span class="token comment">// var app = getApp();</span>
        <span class="token comment">// 即可使用</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>app<span class="token punctuation">.</span>globalData<span class="token punctuation">.</span>isConnected<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            wx<span class="token punctuation">.</span><span class="token function">setStorage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                key<span class="token operator">:</span> <span class="token string">'app_show_pic_version'</span><span class="token punctuation">,</span>
                data<span class="token operator">:</span> <span class="token constant">CONFIG</span><span class="token punctuation">.</span>version
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>shopMod <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                wx<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                    url<span class="token operator">:</span> <span class="token string">'/pages/shop/select'</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                wx<span class="token punctuation">.</span><span class="token function">switchTab</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                    url<span class="token operator">:</span> <span class="token string">'/pages/index/index'</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                title<span class="token operator">:</span> <span class="token string">'当前无网络'</span><span class="token punctuation">,</span>
                icon<span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">imgClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>swiperCurrent <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">!=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>swiperMaxNumber<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                title<span class="token operator">:</span> <span class="token string">'左滑进入'</span><span class="token punctuation">,</span>
                icon<span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br></div></div></details> <ul><li>详细见 <a href="https://gitee.com/willwong/miniapp/tree/master/01%20apifm-wxapi" target="_blank" rel="noopener noreferrer">gitee<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h2 id="首页"><a href="#首页" class="header-anchor">#</a> 首页</h2> <h3 id="navigator-和弹性布局"><a href="#navigator-和弹性布局" class="header-anchor">#</a> navigator 和弹性布局</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- navgator 相当于链接a  --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>navigator</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{true}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/pages/shop/select<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

  <span class="token comment">&lt;!-- 这里要复习一下 css 的弹性盒子布局 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>shops-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>l<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/order-details/icon-address.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>{{shopInfo.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>r<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>切换门店<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/images/icon/next.png<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>navigator</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.shops-container</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token comment">/* 两端对齐 */</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 16rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.shops-container .l</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.shops-container .l text</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #666<span class="token punctuation">;</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> 16rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.shops-container .l image</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 40rpx<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 40rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.shops-container .r</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.shops-container .r text</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #666<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.shops-container .r image</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 40rpx<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 40rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><details class="custom-block details"><summary>弹性布局</summary> <p>参考<a href="https://www.cnblogs.com/hellocd/p/10443237.html" target="_blank" rel="noopener noreferrer">链接<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>,它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，
以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，</p> <p>Flexbox 是一个更强大的方式：</p> <ul><li>在不同方向排列元素</li> <li>重新排列元素的显示顺序</li> <li>更改元素的对齐方式</li> <li>动态地将元素装入容器</li></ul></details> <h3 id="完成首页"><a href="#完成首页" class="header-anchor">#</a> 完成首页</h3> <p>🐟 后面的知识基本相似，具体代码可参考 <a href="https://gitee.com/willwong/miniapp/tree/master/02%20vant" target="_blank" rel="noopener noreferrer">gitee<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>,<br>
🐟 完整项目参考 <a href="https://github.com/EastWorld/wechat-app-mall" target="_blank" rel="noopener noreferrer">天使童装<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>, 建议细读代码， 自己完成一个商城项目。</p> <p><img src="/will/assets/img/30.285430de.png" alt="xx"></p></div> <footer class="page-edit" style="display:none;"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">7/27/2022, 8:13:22 PM</span></div></footer> <!----> <!----> <!----></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><div class="kanbanniang" data-v-5775ee02><div class="banniang-container" style="display:;" data-v-5775ee02><div class="messageBox" style="right:68px;bottom:190px;display:none;" data-v-5775ee02>
      欢迎来到 Will's blog
    </div> <div class="operation" style="right:90px;bottom:40px;display:none;" data-v-5775ee02><i class="kbnfont kbn-ban-home ban-home" data-v-5775ee02></i> <i class="kbnfont kbn-ban-message message" data-v-5775ee02></i> <i class="kbnfont kbn-ban-close close" data-v-5775ee02></i> <a target="_blank" href="https://vuepress-theme-reco.recoluan.com/views/plugins/kanbanniang.html" data-v-5775ee02><i class="kbnfont kbn-ban-info info" data-v-5775ee02></i></a> <i class="kbnfont kbn-ban-theme skin" style="display:none;" data-v-5775ee02></i></div> <canvas id="banniang" width="150" height="220" class="live2d" style="right:90px;bottom:0px;opacity:1;" data-v-5775ee02></canvas></div> <div class="showBanNiang" style="display:none;" data-v-5775ee02>
    看板娘
  </div></div><div></div><canvas id="vuepress-canvas-cursor"></canvas></div></div>
    <script src="/will/assets/js/app.e77fe8ad.js" defer></script><script src="/will/assets/js/3.19d8dd7e.js" defer></script><script src="/will/assets/js/1.cde8b311.js" defer></script><script src="/will/assets/js/9.c8e9dac1.js" defer></script>
  </body>
</html>
